<template>
	<view class="content">


		<view>
			<scroll-view scroll-x="true" class="scroll-row border-bottom" style="height: 80rpx;" :scroll-into-view="scrollId"
			 scroll-with-animation>
				<view v-for="(item,i) in bars" :key="i" class="scroll-row-item px-4" @click="changTab(i)" :id="'tab'+i" style="height: 80rpx;line-height: 80rpx;"
				 :class="tabIndex ===i?'main-text-color ':'' "><text class="font-md">{{item.name}}</text>
				</view>
			</scroll-view>
		</view>

		<view>
			<swiper :duration="150" :current="tabIndex" :style="'height:'+scrollH+'px;'" @change="onChangeTab">
				<swiper-item v-for="(item,index) in bars" :key="index">
					<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
						<!-- 轮播图组件 -->
						<block v-for="(list,listindex) in item.list" :key="listindex">
							<swiper-image v-if="list.type=='swipers'" :swipers="list.data"></swiper-image>


							<template v-else-if="list.type=='navs'">
								<!-- 首页分类 -->
								<inav :list="list.data"></inav>
								<!-- 分割线 -->
								<divider></divider>
							</template>

							<template v-else-if="list.type=='advs'">
								<!-- 三图广告位组件 -->
								<adv :adv="list.data"></adv>
								<divider />
							</template>

							<template v-else-if="list.type=='cards'">
								<!-- 卡片组件 -->
								<card :isShow="list.data.isShow" :imgs="list.data.imgs" :htitle="list.data.htitle"></card>
								<divider />
							</template>


							<!-- 公共列表组件 -->
							<glist v-else-if="list.type=='goods'" :goods="list.data" @goto="go"></glist>
						</block>

						<view class="d-flex a-center j-center text-light-muted font-md py-3">
							<divider />
							上拉加载更多
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>



	</view>
</template>

<script>
	import swiperImage from "@/components/index/swiper.vue"
	import inav from "@/components/index/inav.vue"
	import adv from "@/components/index/adv.vue"
	import card from "@/components/index/card.vue"
	import glist from "@/components/index/glist.vue"
	import scrobar from "@/components/index/scrobar.vue"
	export default {
		data() {
			return {
				scrollId: '',
				demoBars:[],
				title: 'H',
				scrollH: '',
				show: false,
				tabIndex: 0,
				bars: [{
						name: "关注",
						list: [{
								type: "swipers",
								data: [{
										src: "/static/imgs/L1.jpg"
									},
									{
										src: "/static/imgs/L2.jpg"
									},
									{
										src: "/static/imgs/L3.jpg"
									},
								]
							},
							{
								type: "navs",
								data: [{
										"src": "/static/logos/zhuanmai.svg",
										"text": "小码专柜"
									},
									{
										"src": "/static/logos/jiaju.svg",
										"text": "小码家居"
									},
									{
										"src": "/static/logos/xinpin.svg",
										"text": "小码新品"
									},
									{
										"src": "/static/logos/chaoshi.svg",
										"text": "小码超市"
									},
									{
										"src": "/static/logos/chongzhi.svg",
										"text": "小码充值"
									},
									{
										"src": "/static/logos/dianqi.svg",
										"text": "数码电器"
									},
									{
										"src": "/static/logos/baokuan.svg",
										"text": "季度爆款"
									},
									{
										"src": "/static/logos/butie.svg",
										"text": "百亿补贴"
									},
									{
										"src": "/static/logos/miaosha.svg",
										"text": "限时秒杀"
									},
									{
										"src": "/static/logos/jianlou.svg",
										"text": "清仓捡漏"
									}
								]
							},
							{
								type: "advs",
								data: {
									big: {
										src: "/static/imgs/2.png"
									},
									top: {
										src: "/static/imgs/7.png"
									},
									bottom: {
										src: "/static/imgs/4.png"
									}
								}
							},
							{
								type: "cards",
								data: {
									imgs: "/static/imgs/L2.jpg",
									isShow: true,
									htitle: "每日精选"
								}
							},
							{
								type: "goods",
								data: [{
										id: 1,
										name: "iqoo5 智能手机",
										text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
										nprice: 1234,
										oprice: 5678,
										src: "/static/imgs/26.jpg"
									},
									{
										id: 1,
										name: "iqoo5 智能手机",
										text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
										nprice: 1234,
										oprice: 5678,
										src: "/static/imgs/26.jpg"
									},
									{
										id: 1,
										name: "iqoo5 智能手机",
										text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
										nprice: 1234,
										oprice: 5678,
										src: "/static/imgs/26.jpg"
									},
									{
										id: 1,
										name: "iqoo5 智能手机",
										text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
										nprice: 1234,
										oprice: 5678,
										src: "/static/imgs/26.jpg"
									},
									{
										id: 1,
										name: "iqoo5 智能手机",
										text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
										nprice: 1234,
										oprice: 5678,
										src: "/static/imgs/26.jpg"
									},
									{
										id: 1,
										name: "iqoo5 智能手机",
										text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
										nprice: 1234,
										oprice: 5678,
										src: "/static/imgs/26.jpg"
									},
									{
										id: 1,
										name: "iqoo5 智能手机",
										text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
										nprice: 1234,
										oprice: 5678,
										src: "/static/imgs/26.jpg"
									},
									{
										id: 1,
										name: "iqoo5 智能手机",
										text: "高通骁龙865+12GB大运存+UFS 3.1,超能竞速",
										nprice: 1234,
										oprice: 5678,
										src: "/static/imgs/26.jpg"
									}
								]
							}
						]
					},
					{
						name: "推荐",
						list: []
					},
					{
						name: "体育",
						list: []
					},
					{
						name: "热点",
						list: []
					},
					{
						name: "财经",
						list: []
					},
					{
						name: "娱乐",
						list: []
					},
					{
						name: "军事",
						list: []
					},
					{
						name: "综艺",
						list: []
					},
					{
						name: "其他",
						list: []
					}
				]

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight - uni.upx2px(82);
				}
			})
			// 初始化

		},
		methods: {
			go(){
				uni.navigateTo({
					url:"/pages/cart/detail"
				})
			},
			changTab(index) {
				if (this.tabIndex === index) {
					return;
				}
				this.tabIndex = index;
				this.scrollId = 'tab' + index;
			},
			onChangeTab(e) {
				if (e.detail.current === this.tabIndex) {
					return;
				}
				this.tabIndex = e.detail.current;
				this.scrollId = 'tab' + e.detail.current;
			},
			loadmore(index){
				console.log(1);
				
			}
		},
		components: {
			swiperImage,
			inav,
			adv,
			card,
			glist,
			scrobar
		}
	}
</script>

<style>
	
</style>
